<template>
  <div class="read-pwd">
    <div class="content">
      <div class="read-icon">
        <el-icon size="32" color="#c1c8d6"><Lock /></el-icon>
      </div>
      <div class="read-title">输入阅读密码解锁笔记</div>
      <div class="input-pwd" style="margin-top: 20px">
        <el-form
          ref="formRef"
          style="width: 260px"
          :model="unlockForm"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item
            label=""
            prop="readPwd"
            :rules="[{ required: true, message: '密码不能为空' }]"
          >
            <el-input
              v-model="unlockForm.readPwd"
              type="password"
              placeholder="请输入阅读密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              @click="unlock(formRef)"
              >解锁</el-button
            >
          </el-form-item>
          <!-- <el-form-item> -->
          <div class="read-footer">
            <el-space :size="size" :spacer="spacer">
              <el-button type="text" @click="cancel">取消阅读密码</el-button>
              <el-button type="text" @click="forgotPwdVisible = true"
                >忘记密码</el-button
              >
            </el-space>
          </div>
          <!-- </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
  <!-- 忘记密码 -->
  <el-dialog
    v-model="forgotPwdVisible"
    title="忘记阅读密码"
    width="460"
    @close="resetForgotForm(forgotPwdRef)"
  >
    <el-form
      ref="forgotPwdRef"
      style="width: 100%"
      :model="forgotForm"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item
        label="登录密码"
        prop="password"
        :rules="[{ required: true, message: '密码不能为空' }]"
      >
        <el-input
          v-model="forgotForm.password"
          type="password"
          placeholder="请输入登录密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForgotForm(forgotPwdRef)"> 取消 </el-button>
        <el-button type="primary" @click="handleValidateLoginPwd(forgotPwdRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 取消阅读密码  -->
  <el-dialog
    v-model="cancelVisible"
    title="取消阅读密码"
    width="400"
    @close="resetForm(cancelFormRef)"
  >
    <el-form
      ref="cancelFormRef"
      style="width: 100%"
      :model="cancelForm"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item
        label=""
        prop="cancelPwd"
        :rules="[{ required: true, message: '密码不能为空' }]"
      >
        <el-input
          v-model="cancelForm.cancelPwd"
          type="password"
          placeholder="请输入阅读密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="handleConfirmCancelPwd(cancelFormRef)"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 重置密码 -->
  <el-dialog
    v-model="setPwdVisible"
    width="40%"
    top="15vh"
    class="history-modal"
    title="修改阅读密码"
    destroy-on-close
    @close="resetPwdForm(ruleFormRef)"
  >
    <!-- <template #header>
      <div class="" style="font-weight: 500; margin-bottom: 10px">
        修改阅读密码
      </div>
    </template> -->
    <div class="set-pwd">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="重复密码" prop="checkPass">
          <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetPwdForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, h, reactive } from 'vue'
import {
  httpDeleteNoteReadPwd,
  httpValidatePwd,
  httpLoginValidatePwd,
  httpUpdateNoteReadPwd,
} from '@/api/note'
import { ElMessage, ElLoading } from 'element-plus'
import { ElDivider } from 'element-plus'
const size = ref(10)
const formRef = ref()
const spacer = h(ElDivider, { direction: 'vertical' })
const unlockForm = reactive({
  readPwd: '',
})
const props = defineProps({
  data: Object,
  default: () => {},
})
const emit = defineEmits(['unlock', 'update'])
const cancelFormRef = ref()
const cancelForm = reactive({ cancelPwd: '' })
const cancelVisible = ref(false)
const cancel = () => {
  cancelVisible.value = true
}

// 忘记密码
const forgotPwdVisible = ref(false)
const forgotPwdRef = ref(null)
const forgotForm = reactive({
  password: '',
})
const resetForgotForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  forgotForm.password = ''
  forgotPwdVisible.value = false
}
/**
 * 忘记密码 重置密码
 */
const handleValidateLoginPwd = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await httpLoginValidatePwd({
        password: forgotForm.password,
      })
      if (res) {
        forgotPwdVisible.value = false
        setPwdVisible.value = true
      }
    } else {
      console.log('error submit!')
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  cancelForm.cancelPwd = ''
  cancelVisible.value = false
}
// 移除阅读密码
const handleConfirmCancelPwd = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      httpValidatePwd({ password: cancelForm.cancelPwd }).then((res) => {
        httpDeleteNoteReadPwd({ fd_id: props.data.id }).then((res) => {
          if (res) {
            emit('unlock','remove')
          }
        })
      })
    } else {
      console.log('error submit!')
    }
  })
}
const unlock = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      httpValidatePwd({ password: unlockForm.readPwd }).then((res) => {
        if (res) {
          emit('unlock')
        }
      })
    } else {
      console.log('error submit!')
    }
  })
}

const ruleFormRef = ref()
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error('密码不一致!'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  password: '',
  checkPass: '',
})

const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})
const setPwdVisible = ref(false)
const resetPwdForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.password = ''
  ruleForm.checkPass = ''
  setPwdVisible.value = false
}
// const emit = defineEmits([''])
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await httpUpdateNoteReadPwd({
        password: ruleForm.password,
      })
      if (res) {
        ElMessage.success('阅读密码更新成功')
        setPwdVisible.value = false
      }
      //   if (res) {
      //     const result = await httpAddNoteReadPwd({ fd_id: props.data.id })
      //     await userStore.getInfo(true)
      //     console.log('result', result, info.value)
      //     emit('update')
      //     setPwdVisible.value = false
      //   }
    } else {
      console.log('error submit!')
    }
  })
}
</script>
<style scoped lang="scss">
.read-pwd {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .read-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    :deep(.el-divider--vertical) {
      vertical-align: baseline !important;
    }
  }
}
</style>
